<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>小记事本</h2>
    <ul>
      <li>吃饭饭</li>
      <li>睡觉觉</li>
      <li>打豆豆</li>
    </ul>
    <button class="addLi">点击添加</button>
    <script>
      // 点击，添加 li 到 ul 中，内容设置为 待办事项
      const btn = document.querySelector('.addLi')
      // 点击事件
      btn.addEventListener('click', function () {
        // 创建 li
        const li = document.createElement('li')

        // 设置 li 的内容
        li.innerHTML = '待办事项'

        // 添加到 Ul 的内部
        const ul = document.querySelector('ul')
        ul.appendChild(li)
      })
    </script>

    <h2>计数器</h2>
    <!-- span 不换行的 放文本的标签，对标 Text -->
    <button class="add">累加</button> <span>1</span>
    <script>
      // 按钮点击事件
      // 获取原始值，累加，设置给元素
      const addBtn = document.querySelector('.add')
      const span = document.querySelector('span')
      addBtn.addEventListener('click', function () {
        // 取出来
        let num = span.innerHTML
        console.log(num)
        // 累加
        num++
        // 赋值
        span.innerHTML = num
        if (num % 2 === 0) {
          // 双数
          span.style.backgroundColor = 'red'
        } else {
          // 单数
          span.style.backgroundColor = 'blue'
        }
      })
    </script>
  </body>
</html>
